<template>

    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 团购管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container" :style="isPc ?'padding:30px': 'padding:10px'">

          <el-row :gutter="20">
            <el-col :md="6" :xs="24" style="margin:3px 0">
              <el-select v-model="query.state" placeholder="团购状态" clearable style="width: 100%"  class="handle-select">
                <el-option  key="1"  label="正常" value="1" ></el-option>
                <el-option  key="0"  label="已下线" value="0" ></el-option>
              </el-select>
            </el-col>
            <el-col :md="8" :xs="24" style="margin:3px 0">
              <el-button type="primary" icon="el-icon-search" @click="handleSearch" style="min-width:100px;margin-right: 10px">搜索</el-button>
              <el-button type="warning"  v-if="isPc" icon="el-icon-plus" @click="editVisible=true">新增团购</el-button>
            </el-col>
          </el-row>
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                @sort-change="sortChange"
                header-cell-class-name="table-header"
            >
                <el-table-column v-if="isPc" prop="id" width="80px" label="Id"></el-table-column>
                <el-table-column v-if="isPc" prop="group_no" width="120px" label="编号"></el-table-column>
                <el-table-column prop="mp_name" label="主商品"   align="center"></el-table-column>
                <el-table-column prop="mp_price" label="价格"   align="center"></el-table-column>
              <el-table-column prop="lucky_name" label="幸运商品"   align="center"></el-table-column>
              <el-table-column prop="lucky_price" label="幸运价值"   align="center"></el-table-column>
              <el-table-column prop="total_count" label="总份数"   align="center"></el-table-column>
              <el-table-column prop="buy_count" label="已售"   align="center"></el-table-column>
              <el-table-column  label="开始时间"   align="center">
                <template slot-scope="scope">
                  {{scope.row.begin_time.substr(0, 16)}}
                </template>
              </el-table-column>
              <el-table-column label="结束时间"   align="center">
                <template slot-scope="scope">
                  {{scope.row.end_time.substr(0, 16)}}
                </template>
              </el-table-column>
              <el-table-column  label="状态"   align="center">
                <template slot-scope="scope">
                  {{statusArr[scope.row.status]}}
                </template>
              </el-table-column>


              <el-table-column label="操作" :width="isPc? '120px' : '75px'"  align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="handleEdit(scope.$index, scope.row)"
                        >修改
                        </el-button>


                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination
                  background
                  :layout="isPc ? 'prev,next,pager' : 'prev,next'"
                  :current-page="query.pageIndex"
                  :page-size="query.pageSize"
                  :total="total"
                  @current-change="handlePageChange"
              ></el-pagination>
            </div>
        </div>
        <!-- 编辑弹出框 -->
        <el-dialog title="基本信息" :visible.sync="editVisible" :width="modalWidth"  :close-on-click-modal="false">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item v-if="form.id > 0" label="编号">
                    <el-input v-model="form.group_no" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="主商品">
                    <el-select v-model="form.main_spu_id" filterable placeholder="" class="add-dialog-input mr10">
                      <el-option v-for = "c in spuArr" :key="c.id" :label="c.name" :value="c.id" ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="幸运商品">
                    <el-select v-model="form.lucky_spu_id" filterable placeholder="" class="add-dialog-input mr10">
                        <el-option v-for = "c in spuArr" :key="c.id" :label="c.name" :value="c.id" ></el-option>
                    </el-select>
                </el-form-item>
              <el-form-item label="幸运商品标题">
                <el-input v-model="form.lucky_name" :min="1" :max="100" label="描述文字"></el-input>
              </el-form-item>
              <el-form-item label="幸运商品价值">
                <el-input v-model="form.lucky_price" :min="1" :max="100" label="描述文字"></el-input>
              </el-form-item>
                <el-form-item label="总份数">
                  <el-input-number v-model="form.total_count" :min="1" :max="100" label="描述文字"></el-input-number>
                </el-form-item>
                <el-form-item label="开始时间">
                    <el-date-picker
                        v-model="form.begin_time"
                        type="datetime"
                        placeholder="选择日期时间"
                        align="right"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间">
                    <el-date-picker
                        v-model="form.end_time"
                        type="datetime"
                        placeholder="选择日期时间"
                        align="right"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="状态">
                  <el-select v-model="form.status" filterable placeholder="" class="add-dialog-input mr10">
                    <el-option v-for = "(v, k) in statusArr" :key="k" :label="v" :value="k" ></el-option>
                  </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>




export default {
    name: 'goods',
    data() {
        return {
            query: {

                orderBy: '',
                order: '',
                page: 1,
                pageSize: 10,
                state: '1',
                type: '0',
            },
            statusArr: {
                0: '未上线',
                1: '进行中',
                2: '已完成',
                3: '已退款',
            },
            tableData: [],
            spuArr: [],
            editVisible: false,
            uploadVisible: false,
            searchAttrVisible: false,
            editAttrVisible: false,
            editOptions: [],
            addAttrArr: [],
            form: {},
            idx: -1,
            id: -1,
            isPc: false,
            modalWidth: '80%',
            listImgIdx: 1,
            total: 0,
        };
    },
    created() {
        if (document.body.clientWidth > 500) {
            this.modalWidth = '40%'
            this.isPc = true
        }
        this.http.getSpuSample().then(res => {
          this.spuArr = res.data;
        });
        this.initForm()
        this.getData();
    },
    activated(){

    },
    mounted(){

    },
    methods: {
        initForm() {
          this.form = {
            id: 0,
            group_no: '',
            main_spu_id: '',
            lucky_spu_id: '',
            total_count: '',
            begin_time: '',
            end_time: '',
            status: '',
            lucky_price: '',
            lucky_name: '',
          }
        },
        sortChange({ column, prop, order }){
            this.query.orderBy = prop
            this.query.order = order === 'ascending' ? 'asc' : (order === 'descending' ? 'desc': '')
            this.handleSearch()
        },
        getData() {
            this.http.getGroupProduct().then(res => {
                this.tableData = res.data;
            });
        },
        handlePageChange(val) {
            this.$set(this.query, 'page', val);
            this.getData();
        },
        // 触发搜索按钮
        handleSearch() {
            if(this.query.name) {
              this.$set(this.query, 'page', 1);
            }
            this.getData();
        },
        // 编辑操作
        handleEdit(index, row) {
            this.idx = index;
            this.form = row;
            this.editVisible = true;
        },

        editDetail(index, row) {
            this.detailId = row.id
            this.http.getSpuDetail(this.detailId).then(res => {
                this.detailContent = res.data.detail_content
            })
            this.detailVisible = true;
        },

        // 保存编辑
        saveEdit() {
            this.editVisible = false;
            this.http.editGroup(this.form)
            this.$message.success((this.form.id === 0 ? '新增': '修改' ) + '团购成功');
            this.$set(this.tableData, this.idx, this.form);
            this.initForm()
            this.getData()
        },
    }
};
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
    background-color: #fff;
}

.handle-select {
  width: 46%;
}

.add-dialog-input {
    width: 80%;
}

.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
